<template>
	<view class="login-bottom">
		<checkbox-group @change="selfChangde">
			<checkbox style="transform:scale(0.7)" :checked="isChecked"></checkbox>
			<text :style="{color: readTextColor}" class="login-bottom-title">已阅读并同意</text>
			<text @click="gotoUserXy" class="login-bottom-xy">《用户协议》</text>
			<text :style="{color: readTextColor}" class="login-bottom-title">和</text>
			<text @click="gotoPrivateXy" class="login-bottom-xy">《隐私协议》</text>
		</checkbox-group>
	</view>
</template>

<script>
	export default {
		props: {
			isChecked: {
				type: Boolean,
				default: false
			},
			readTextColor: {
				type: String,
				default: '#333'
			}
		},
		data() {
			return {

			}
		},
		methods: {
			selfChangde() {
				this.$emit('selfChangde')
			},
			gotoUserXy() {
				uni.navigateTo({
					url: '/subpkg/main/my/agree-on/user-xy/user-xy'
				})
			},
			gotoPrivateXy() {
				uni.navigateTo({
					url: '/subpkg/main/my/agree-on/private-xy/private-xy'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 底部协议 */
	.login-bottom {
		// display: flex;
		position: fixed;
		//white-space: wrap;
		z-index: 99;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		//line-height: 100rpx;
		font-size: 26rpx;
		text-align: center;

		input {
			width: 30rpx;
			height: 30rpx;
		}

		text {
			margin: 0 1%;
		}

		.login-bottom-xy {
			color: #8295a5;
		}

		.login-bottom-title {
			color: #fff;
		}
	}
</style>